<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <div>
        <label for="urlInput">URL:</label>
        <input type="text" id="urlInput">
        <label for="productTypeInput">Product Type:</label>
        <input type="text" id="productTypeInput">
        <button onclick="showProduct()">Show Product</button>
        <button onclick="confirmProduct()">确定</button>
    </div>
    <div id="result"></div>

    <script>
        function showProduct() {
            const urlInput = document.getElementById('urlInput');
            const productTypeInput = document.getElementById('productTypeInput');
            const result = document.getElementById('result');

            let url = urlInput.value;
            const productType = productTypeInput.value;
            const onOrOff = 'on'; // You may modify this based on your logic
            console.log('url', url);
            url = 'http://47.108.20.64:9000/product//demo001-1705301516234-3b7b83808cc2199839e827353bd8a136-6-509.enc?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=g5fMoJm1xGdBSbgMrDpw%2F20240115%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240115T065158Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=debac481e69626cafca427d3ace127f25e45fb446c8f67c0ed7a5a04b368c14d'
            if (productType) {
                console.log('产品类型', productType, onOrOff);

                const appendParagraph = (text) => {
                    const paragraph = document.createElement('p');
                    paragraph.textContent = text;
                    result.appendChild(paragraph);
                };

                if (productType === 'png' || productType === 'jpg' || productType === 'jpeg') {
                    fetch(url)
                        .then(response => {
                            console.log('response', response);
                            if (!response.ok) {
                                throw new Error('Network response was not ok');
                            }
                            return response.blob();
                        })
                        .then(blob => {
                            console.log('blob', blob);
                            const img = document.createElement('img');
                            img.src = URL.createObjectURL(blob);
                            result.appendChild(img);
                        })
                        .catch(error => {
                            console.error('There has been a problem with your fetch operation:', error);
                            appendParagraph(`解析url失败,原因：${error}`);
                        });
                } else if (productType === 'json') {
                    fetch(url)
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('Network response was not ok');
                            }
                            return response.text();
                        })
                        .then(text => {
                            if (onOrOff === 'on') {
                                const json = JSON.parse(text);
                                let resultHTML = `
                                  <table class="layui-table" id="jsonTable" lay-filter="jsonTable">
                              `;
                                result.innerHTML = resultHTML;

                                if (json.Fields) {
                                    const table = document.createElement('table');
                                    table.className = 'layui-table';
                                    table.id = 'jsonTable';
                                    table.setAttribute('lay-filter', 'jsonTable');

                                    let headerRow = table.insertRow();
                                    headerRow.insertCell(0).textContent = '序号';

                                    json.Fields.forEach((field, index) => {
                                        headerRow.insertCell(index + 1).textContent = field;
                                    });

                                    let rows = [];
                                    for (let i = 0; i < json.Rows.length; i++) {
                                        let obj = {};
                                        let row = table.insertRow();
                                        row.insertCell(0).textContent = i + 1;

                                        for (let j = 0; j < json.Fields.length; j++) {
                                            obj[json.Fields[j]] = json.Rows[i][j];
                                            row.insertCell(j + 1).textContent = json.Rows[i][j];
                                        }
                                        rows.push(obj);
                                    }

                                    result.appendChild(table);
                                } else {
                                    appendParagraph('解析json失败');
                                }
                            } else if (onOrOff === 'off') {
                                const pre = document.createElement('pre');
                                pre.id = 'json-renderer';
                                result.appendChild(pre);

                                try {
                                    const json = JSON.parse(text);
                                    pre.textContent = JSON.stringify(json, null, 2);
                                } catch (e) {
                                    console.log(e);
                                    alert('JSON格式错误');
                                    appendParagraph(`JSON格式错误：${e}`);
                                }
                            } else {
                                appendParagraph('当前产品类型不支持展示');
                            }
                        })
                        .catch(error => {
                            console.error('There has been a problem with your fetch operation:', error);
                            appendParagraph(`解析url失败,原因：${error}`);
                        });
                } else {
                    appendParagraph('当前产品类型不支持展示');
                }
            } else {
                appendParagraph('产品类型缺失，无法展示产品结果');
            }
        }

        function confirmProduct() {
            showProduct(); // Call the showProduct function with the current input values
        }
    </script>
</body>

</html>